CSS Backgrounds — PBA Institute CSS Tutorial
Chapter 05 · CSS Tutorial Series
10 min read Beginner

CSS Backgrounds

CSS Backgrounds let you control the visual area behind any HTML element. You can set a solid color, an image, a gradient, a pattern, or any combination of these. Backgrounds are essential for hero sections, cards, banners, and full-page designs.

CSS Background Properties

🎨

background-color

Sets a solid background color using any CSS color format.

🖼️

background-image

Adds an image (or gradient) behind the element.

🔁

background-repeat

Controls whether the image repeats — repeat, no-repeat, repeat-x, repeat-y.

📍

background-position

Positions the background — left, right, center, or using x/y values.

📏

background-size

Resizes the background — cover, contain, auto, or fixed values.

📌

background-attachment

Decides whether the background scrolls or stays fixed.

CSS Background Syntax

Background Syntax 
selector {
    background-color: #f0f8ff;
    background-image: url("bg.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

/* Shorthand */
selector {
    background: #f0f8ff url("bg.jpg") no-repeat center/cover fixed;
}

Background Color Example

The background-color property is used to set a solid color for an element background.

HTML + CSS Example 
<!DOCTYPE html>
<html>

<head>

<style>

body{
    background-color:rgb(163,228,215);
}

div{
    background-color:
    rgba(255,0,0,0.5);
}

</style>

</head>

<body>

<div>

    <h1>CSS</h1>

    <p>
        Welcome to PBA INSTITUTE
    </p>

</div>

</body>
</html>
Background Color Example
Output Light blue-green page background with semi-transparent red content area.
  • background-color: Adds solid background color.
  • rgba(): Creates transparent backgrounds.
  • Visual Effect: Highlights important content sections.

Background Image Example

The background-image property allows images to be used as webpage backgrounds.

HTML + CSS Example 
<!DOCTYPE html>
<html>

<head>

<style>

body{
    background-image:
    url(backimage.webp);
}

h1{
    color:white;
    font-size:40px;
}

p{
    color:white;
    font-size:20px;
}

</style>

</head>

<body>

<h1 align="center">
    CSS Tutorial
</h1>

<p align="center">
    Welcome to PBA INSTITUTE
</p>

</body>
</html>
Background Image Example
Output Fullscreen image background with centered white typography.
  • background-image: Adds images to webpage background.
  • Typography: White text improves visibility.
  • Modern UI: Creates attractive landing page designs.

Background Example

HTML + CSS Code 
<!DOCTYPE html>
<html>
<head>
    <title>CSS Backgrounds</title>
    <style>
        body {
            background-color: #fafafa;
            font-family: Arial;
            text-align: center;
        }
        .hero {
            background: linear-gradient(135deg, #1a73e8, #00bcd4);
            color: white;
            padding: 60px 20px;
        }
        .card {
            background-color: #fff;
            background-image: url("pattern.png");
            background-repeat: repeat;
            padding: 30px;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="hero">
        <h1>Welcome to PBA Institute</h1>
        <p>Learn CSS with confidence</p>
    </div>
    <div class="card">A patterned card section</div>
</body>
</html>
Output A hero section with a blue-cyan gradient and a card with a repeating pattern background.

Code Explanation

  • background-color: Solid color behind the element.
  • linear-gradient(): Smooth color transition for modern hero sections.
  • background-image: url(): Loads an image as the background.
  • background-repeat: Controls tiling behavior.
  • Shorthand: Combines all properties in a single declaration for cleaner code.

Background Property Reference

Property Common Values Description
background-color color / transparent Sets a solid background color
background-image url() / linear-gradient() Adds image or gradient
background-repeat repeat / no-repeat / repeat-x Controls tiling
background-position center / top left / 50% 50% Position of background
background-size cover / contain / 100% 100% Background dimensions
background-attachment scroll / fixed / local Scroll behavior

Background Types

Solid Color

Simple flat color using background-color.

Image Background

Use background-image: url() to add photos or patterns.

Gradient Background

Use linear-gradient() or radial-gradient().

Common Values

Repeat
repeat no-repeat repeat-x repeat-y
Position
center top bottom left right
Size
cover contain auto 100%
Attachment
scroll fixed local

Important Notes

  • Use shorthand: It keeps code clean — background: sets all sub-properties.
  • Optimize images: Compress images for faster page load.
  • Use cover for full screen: Best for hero banners and landing pages.
  • Fallback color: Always set a background color in case the image fails to load.

Real-World Use Cases

Hero Sections

Full-width image or gradient with overlay text.

Cards

Subtle patterns or soft colors behind content.

Parallax

Fixed background for scrolling parallax effect.

Practice Questions

  • Set a body background color to #f0f8ff.
  • Add a no-repeat background image positioned at the top right.
  • Create a linear gradient from blue to green at 45 degrees.
  • Use background: cover to make a hero image fill the screen.
  • Write a shorthand background declaration that combines color, image and no-repeat.

Frequently Asked Questions

  • How do I add a background image: Use background-image: url("path.jpg") in your CSS.
  • How to stop background image repeating: Use background-repeat: no-repeat;.
  • What does cover do: It scales the background so it fully covers the element while preserving aspect ratio.
  • Can I have multiple backgrounds: Yes — separate multiple background images by commas in a single declaration.

Conclusion

CSS backgrounds give web pages depth and personality. Whether you use solid colors, images, or gradients, the background properties give you complete control over the look and feel of every section.

CSS All Topics

Introduction Selectors Style Sheet Insertion CSS Color CSS Backgrounds CSS Border CSS Margin CSS Table CSS Text Fonts CSS Links Animation Button Transition Cursor Type Navbar Layout Login Page Image Slider

Continue Learning

Previous

Go to CSS Color Chapter

Next

Go to CSS Border Chapter